<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 22:41:06
-->
<template>
  <div ref="Right2_container" style="height:95%"></div>
</template>

<script>
import { Gauge } from '@antv/g2plot';
import {get} from '../../../utils/request'

export default {
  data() {
    return{
      pm25:0,
      percent:'',
    }
  },
  //请求到数据，但还没有挂在到页面上
  created(){    
  },
  //请求到数据 且挂在，进行重构，绘制图像
  mounted(){    
    this.initData()

  },
  methods:{
    initData(){
      get('/dashboard/pageQueryTodayData',{
        page:1,
        pageSize:20,
        device_id:3,
      }).then (res =>{
        this.percent = res.data.list[1].pm25/300;
        console.log(222,this.percent);
        this.initChart();
      })
      
    },
    initChart(){
      const ticks =[0,7/60,1/4,23/60,1/2,5/6,1];
        const gauge = new Gauge(this.$refs.Right2_container, {
          percent:this.percent,
          range: {
            ticks: [0,7/60,1/4,23/60,1/2,5/6,1],
            color:  ['#9df1a2','#54cf76', '#edbc74', '#e98f36','#df877c','#d81e06'],
          },
          indicator: {
            pointer: {
              style: {
                stroke: '#D0D0D0',
              },
            },
            pin: {
              style: {
                stroke: '#D0D0D0',
              },
            },
          },

            axis: {
            label: {
              formatter(v) {
                return Number(v) * 300;
              },
            },
            subTickLine: {
              count: 5,
            },
          },
          statistic: {
            title: {
              formatter: ({ percent }) => {
                if (percent < ticks[1]) {
                  return '优';
                }
                if (percent < ticks[2]) {
                  return '良好';
                }
                if (percent < ticks[3]) {
                  return '轻度污染';
                }
                if (percent < ticks[4]) {
                  return '中度污染';
                }
                if (percent < ticks[5]) {
                  return '重度污染';
                }
                return '严重污染';
              },
              style: {
                fontSize: '20px',
                lineHeight: 1,
            },
            },

            content: {
              formatter: ({ percent }) => `颗粒物: ${(percent*300).toFixed(0)}`,
              offsetY: 20,
              style: {
                fontSize: '14px',
                color: 'white',
              },
            },
          },
        });

        gauge.render();
        setInterval(() => {
        if (this.pm25< this.percent) {
          this.pm25 +=0.01
          gauge.changeData(this.pm25);
        }else{
          this.pm25 = this.percent
        }
    },50)

      }
    }
}
</script>